<template>
  <div>
    <!-- 分配菜单 -->
    <el-dialog
      title="分配菜单"
      :visible.sync="dialogVisibleMenu"
      width="30%" 
    >
      <el-tree
        :data="menu"
        :props="defaultProps"
        show-checkbox
        :expand-on-click-node="false" default-expand-all node-key="mid" 
        :default-checked-keys="menucheckedkeys" ref="menutree"
      ></el-tree>
        <el-button @click="dialogVisibleMenu = false;menucheckedkeys=[]">取 消</el-button>
        <el-button type="primary" @click="allocationMenu"
          >确 定</el-button
        >
    </el-dialog>
    <!-- 角色列表 -->
    <div>
      <el-table :data="roles" style="width: 100%">
        <el-table-column prop="rid" label="角色编号" width="180">
        </el-table-column>
        <el-table-column prop="rname" label="角色名称" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >分配菜单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roles: [],
      dialogVisibleMenu: false,
      menu: [],
      defaultProps: {
        children: "children",
        label: "mname",
      },
      menucheckedkeys: [],
      role:{},
    };
  },
  created() {
    this.getAllRoles();
    this.getAllMenus();
  },
  methods: {
    getAllRoles() {
      this.$axios.get("http://localhost:8080/role/get/all").then((resp) => {
        this.roles = resp.data.data;
      });
    },
    handleEdit(index, row) {
      console.log("弹出分配菜单dialog", index, row);
      this.dialogVisibleMenu = true;
      this.role={rid:row.rid};
      //获取已经分配过的菜单id--mids
      this.$axios.get("http://localhost:8080/role/getmids/"+row.rid).then((resp) => {
        if (resp.data.code == 200) {
          //所有的选中节点中，获取叶子节点
          for(let mid of resp.data.data ){
             if(this.$refs.menutree.getNode(mid).isLeaf){
                this.menucheckedkeys.push(mid);
             }  
          }
          this.$refs.menutree.setCheckedKeys(this.menucheckedkeys);
        }
      });
    },
    getAllMenus() {
      this.$axios.get("http://localhost:8080/menu/get/all").then((resp) => {
        if (resp.data.code == 200) {
          this.menu = resp.data.data;
        }
      });
    },
    allocationMenu(){
      // console.log(this.role);
      // console.log(this.$refs.menutree.getCheckedKeys().concat(this.$refs.menutree.getHalfCheckedKeys()));
      let rolemenu={role:this.role,
          mids:this.$refs.menutree.getCheckedKeys().concat(this.$refs.menutree.getHalfCheckedKeys())};
       this.$axios.post("http://localhost:8080/role/allocationMenu",rolemenu).then((resp) => {
        if (resp.data.code == 200) {
          this.$message("添加成功");
          this.dialogVisibleMenu=false;
          this.menucheckedkeys=[];
        }else{
          this.$message(resp.data.msg);
        }
      });     
    },
  },
};
</script>

<style>
</style>